<template>
	<div class="sidebar">
		<el-menu class="sidebar-el-menu" background-color="#324157" text-color="#bfcbd9" active-text-color="#20a0ff"
			unique-opened router>
			<template v-for="item in state.items">
				<template v-if="item.subs">
					<el-sub-menu :index="item.index" :key="item.index">
						<template #title>
							<i :class="item.icon"></i>
							<span>{{ item.title }}</span>
						</template>
						<template v-for="subItem in item.subs">
							<el-sub-menu v-if="subItem.subs" :index="subItem.index" :key="subItem.index">
								<template #title>{{ subItem.title }}</template>
								<el-menu-item v-for="(threeItem, i) in subItem.subs" :key="i" :index="threeItem.index">
									{{ threeItem.title }}
								</el-menu-item>
							</el-sub-menu>
							<el-menu-item v-else :index="subItem.index" :key="subItem.index + 1">
								{{ subItem.title }}
							</el-menu-item>
						</template>
					</el-sub-menu>
				</template>
				<template v-else>
					<el-menu-item :index="item.index" :key="item.index">
						<i :class="item.icon"></i>
						<template #title>{{ item.title }}</template>
					</el-menu-item>
				</template>
			</template>
		</el-menu>
	</div>
</template>
<script setup>
import {
	reactive,
	toRefs,
	computed
} from "vue";
import {
	useStore
} from "vuex";
const Store = useStore();
const state = reactive({
	items: [
		{
			icon: "el-icon-date",
			index: "1",
			title: "基本信息维护",
			subs: [{
				index: "cons",
				title: "常数类别管理",
			},{
				index: "dept",
				title: "科室管理",
			},
			{
				index: "doctor",
				title: "医生管理",
			}, 
			{
				index: "yaopinlx",
				title: "药品类型管理",
			},
			]
		},
		{
				icon: "el-icon-date",
				index: "2",
				title: "门诊药房工作站",
				subs: [{
					index: "yaopin",
					title: "药品管理",
				},
				{
					index: "fayao",
					title: "药房发药",
				}, {
					index: "tuiyao",
					title: "药房退药",
				}, 
				],
			},
	]
}
);
</script>
<style scoped>
.sidebar {
	display: block;
	position: absolute;
	left: 0;
	top: 70px;
	bottom: 0;
	overflow-y: scroll;
	background: pink;
}

.sidebar::-webkit-scrollbar {
	width: 0;
}

.sidebar-el-menu:not(.el-menu--collapse) {
	width: 250px;
}

.sidebar>ul {
	height: 100%;
	text-align: left;
}
</style>
